/* 流动的彩色粒子效果 */
#particles-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
  overflow: hidden;
}

.particle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.5;
  animation-name: float-particle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-play-state: running;
  will-change: transform, opacity;
  background: radial-gradient(circle at center, currentColor 0%, transparent 70%);
}

@keyframes float-particle {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 0.2;
  }
  20% {
    opacity: 0.8;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(-100vh) translateX(20vw) rotate(360deg);
    opacity: 0;
  }
}

/* 生成不同大小、颜色和动画时间的粒子 */
.particle:nth-child(7n+1) {
  width: 8px;
  height: 8px;
  color: #1677FF; /* 拂晓蓝 */
  animation-duration: 15s;
}

.particle:nth-child(7n+2) {
  width: 12px;
  height: 12px;
  color: #52C41A; /* 极光绿 */
  animation-duration: 22s;
}

.particle:nth-child(7n+3) {
  width: 16px;
  height: 16px;
  color: #722ED1; /* 酱紫 */
  animation-duration: 28s;
}

.particle:nth-child(7n+4) {
  width: 10px;
  height: 10px;
  color: #F5222D; /* 薄暮红 */
  animation-duration: 18s;
}

.particle:nth-child(7n+5) {
  width: 14px;
  height: 14px;
  color: #FA8C16; /* 日暮橙 */
  animation-duration: 25s;
}

.particle:nth-child(7n+6) {
  width: 18px;
  height: 18px;
  color: #13C2C2; /* 明青 */
  animation-duration: 30s;
}

.particle:nth-child(7n+7) {
  width: 20px;
  height: 20px;
  color: #EB2F96; /* 玫红 */
  animation-duration: 35s;
}

.particle:nth-child(5n+1) {
  animation-delay: -15s;
}

.particle:nth-child(5n+2) {
  animation-delay: -12s;
}

.particle:nth-child(5n+3) {
  animation-delay: -9s;
}

.particle:nth-child(5n+4) {
  animation-delay: -6s;
}

.particle:nth-child(5n+5) {
  animation-delay: -3s;
}

/* 粒子起始位置随机分布 */
.particle:nth-child(7n+1) { left: 5%; }
.particle:nth-child(7n+2) { left: 20%; }
.particle:nth-child(7n+3) { left: 35%; }
.particle:nth-child(7n+4) { left: 50%; }
.particle:nth-child(7n+5) { left: 65%; }
.particle:nth-child(7n+6) { left: 80%; }
.particle:nth-child(7n+7) { left: 95%; }

.particle:nth-child(11n+1) { bottom: 5%; }
.particle:nth-child(11n+2) { bottom: 15%; }
.particle:nth-child(11n+3) { bottom: 25%; }
.particle:nth-child(11n+4) { bottom: 35%; }
.particle:nth-child(11n+5) { bottom: 45%; }
.particle:nth-child(11n+6) { bottom: 55%; }
.particle:nth-child(11n+7) { bottom: 65%; }
.particle:nth-child(11n+8) { bottom: 75%; }
.particle:nth-child(11n+9) { bottom: 85%; }
.particle:nth-child(11n+10) { bottom: 95%; }
.particle:nth-child(11n+11) { bottom: 100%; }
